<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form>
      <input type="text" />
      <button type="button" data-submit-disabled data-action="submit,counter">提交表单</button>
    </form>
    <script>
      class FORM {
        constructor(form) {
          this.form = form;
          this.form.counter = 0;
          this.form.addEventListener('click', this.handle.bind(this));
        }
        handle() {
          // console.log(this);
          const actions = event.target.dataset.action;
          console.log(actions);
          actions.split(',').forEach((action) => {
            if (this[action]) this[action]();
          });
        }
        submit() {
          event.preventDefault();
          this.disableButton(true);
          console.log('提交中');
          setTimeout(() => {
            this.disableButton(false);
            console.log('提交结束');
          }, 1000);
        }
        disableButton(state) {
          this.form.querySelectorAll(`[data-submit-disabled]`).forEach((bt) => {
            bt.disabled = state;
          });
        }
        counter() {
          this.form.counter++;
          console.log(this.form.counter);
        }
      }
      document.querySelectorAll(`form`).forEach((form) => {
        new FORM(form);
      });
    </script>
  </body>
</html>
